<template>
    <div>
        <a-modal v-model="visible"
                 :title="title"
                 @ok="handleOk"
                 @cancel="cancel"
                 centered
                 width="40em"
                 :cancelText="cancelText"
                 :okText="okText">
            <a-form-model
                    ref="form"
                    :model="teaRecord"
                    :rules="rules"
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span:  16}"
            >
                <a-form-model-item label="工号" prop="account">
                    <a-tooltip placement="topLeft" title="格式为：65132">
                        <a-input type="number" placeholder="格式为：65132" v-model="teaRecord.account"/>
                    </a-tooltip>
                </a-form-model-item>
                <a-form-model-item label="姓名" prop="name">
                    <a-tooltip placement="topLeft" title="格式为：姓名">
                        <a-input placeholder="格式为：姓名" v-model="teaRecord.name"/>
                    </a-tooltip>
                </a-form-model-item>
                <a-form-model-item label="密码" prop="password">
                    <a-tooltip placement="topLeft" title="格式为：1234567890">
                        <a-input type="number" placeholder="格式为：sdf65sf64" v-model="teaRecord.password"/>
                    </a-tooltip>
                </a-form-model-item>
                <a-form-model-item label="邮箱" prop="email">
                    <a-tooltip placement="topLeft" title="格式为：123456@qq.com">
                        <a-input type="email" placeholder="格式为：123456" v-model="teaRecord.email"/>
                    </a-tooltip>
                </a-form-model-item>
                <a-form-model-item label="电话" prop="phone">
                    <a-tooltip placement="topLeft" title="格式为：12345678910">
                        <a-input placeholder="格式为：123456" v-model="teaRecord.phone"/>
                    </a-tooltip>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>

<script>
    import { mapState } from "vuex";
    const rules={
        account:[{ required: true, message: '请输入工号!',trigger: 'change'}],
        name:[{ required: true, message: '请输入名字!',trigger: 'change'}],
        password:[{ required: true, message: '请输入密码，最长10位',trigger: 'change', max: 10}],
        email:[{ required: true, message: '请正确输入',trigger: 'change', type: 'email'}],
        phone:[{ required: true, message: '请正确输入',trigger: 'change'}]
    }
    export default {
        name: "addStudent",
        data() {
            return {
                rules,
                title: '添加老师',
                flag: false,
                visible:false,
                cancelText:'取消',
                okText:'确认',
                gradeData: [],
                showMajordata:true,  //默认命令选择框是禁用的
                classesRecord:{
                    classesId:'',
                    grade:'',
                    major:'',
                    number:'',
                },
                NianJi: [], // 年级
                majorData: ["计算机", "软件"], // 专业
                stuClass: [], // 班级
                stuCollege: [], // 专业
                teaRecord: {
                    account: '',
                    name: '',
                    password: '',
                    phone: '',
                    email: ''
                }
            }
        },
        methods: {
            //表格编辑特定班级
            showModel(){
                this.visible=true;//显示弹框
            },
            //确定时回调
            handleOk(){
                // this.visible=false;
                //新增
                this.$refs.form.validate(value=>{
                    if(value){
                        console.log("添加老师", this.teaRecord)
                        this.$store.dispatch('classes/addTeacher',{token:this.accessState.token,teacher:this.teaRecord, collegeId:this.accessState.collegeId})
                            .then(data=>{
                                // console.log("添加返回", data)
                                if(data.code === 1){
                                    this.$message.success("添加成功");
                                    this.visible=false;
                                    this.$refs.form.resetFields();
                                    this.$emit("get")
                                }else{
                                    this.$message.error("添加失败");
                                }
                        }).catch(err=>{
                            if(String(err)==='undefined'){
                                this.$message.error('用户数据已存在');
                            }else {
                                this.$message.error(err.msg);
                            }
                        });
                    }else {
                        this.$message.error("请正确填写表单");
                    }
                })
            },
            //取消时回调
            cancel(){
                this.visible=false;
                this.$refs.form.resetFields();
                // this.showMajordata = true;
            }
        },
        created() {
            //获取班级
            this.$store.dispatch('courseGroup/courseGroupGetClasses',{
                token:this.accessState.token,
                collegeId:this.accessState.collegeId
            }).then(()=>{
                this.stuClass=this.courseGroupState.classes
                // console.log("班级", this.stuClass)
            }).catch(error=>{
                this.$message.error(error)
            })
        },
        computed: {
            ...mapState({ // 这个是提取store中access文件夹目录下的数据
                'accessState': 'access',
                'courseGroupState':'courseGroup'
            })
        }
    }
</script>

<style scoped>
</style>
